<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<canvas id="myCanvas" width="600" height="400" style="border: solid 2px black;">
			您的浏览器不支持 HTML5 canvas标签
		</canvas>
		<script type="text/javascript">
			//获取Canvas对象(画布)
			var canvas = document.getElementById("myCanvas");
			//检测当前浏览器是否支持Canvas对象
			if(canvas.getContext) {
				//获取对应的CanvasRenderingContext 2D对象
				var ctx = canvas.getContext("2d");
				//创建新的图片对象
				var img = new Image();
				//指定图片的URL
				img.src = "img/52.jpg";
				//浏览器加载图片完毕后再绘制图片
				img.onload = function() {
					//以Canvas画布上的坐标(50,50)为起始点，绘制图像
					//图像的宽度和高度分别缩放到500px和300px
					ctx.drawImage(img, 50, 50, 500, 300);
				};
			}
		</script>
	</body>

</html>